import React, {useState, useEffect} from 'react'
//引入antd
import {Button, Table} from "antd";
//引入样式
import table from './tableList.module.scss'
//引入模态框
import {EditModal, TimeModal} from '../EditModal/index'
import http from "../../../../../services/service";
//引入时间转换
import moment from "moment";



function TableList(props) {
    let {tableData,getTableData} = props;
    //修改状态
    const [editModal, setEditModal] = useState(false);
    //修改时间
    const [timeModal, setTimeModal] = useState(false);
    //表格选中的数据行
    const [selectRows, setSelectRows] = useState([]);
    //日历选择的时间
    let [cTime, setTime] = useState('2017-05-16');
    //orderID
    let [orderId, setOrderId] = useState([]);
    //状态
    let [status,setStatus] = useState("");


    const rowSelection = {
        //勾选数据的回调
        onChange: (selectedRowKeys, selectedRows) => {
            //主键  行数据
            let arr = []
            selectedRows.map(item=>{
                arr.push(item.order_orderId)
            })
            setOrderId([...arr])
        },
        selectedRowKeys:orderId
    };
    //时间模态框ok
    const handleTimeOk = () => {
            orderId = orderId[0]
            http.post(`/yxx/rEditInfo`,{orderId,cTime}).then(()=>{
                getTableData();
            });
            setTimeModal(false)
    };
    //状态模态框OK
    const handleStatusOk = (status)=>{
        orderId.map(item=>{
            orderId = item;
            http.post(`/yxx/rEditStatus`,{orderId,status}).then(()=>{
            });
        })
        getTableData();
        setEditModal(false);
        setOrderId([])
    }
    //模态框取消
    const handleCancel = (value) => {
        if (value === "time") {
            setTimeModal(false)
        } else {
            setEditModal(false);
        }
    };

    //模态框是否可见
    const showModal = (value) => {
        return () => {
            if (value === "time") {
                setTimeModal(true)
            } else {
                setEditModal(true);
            }
        }
    };

    //修改时间
    const onTimeChange = (orderId,order_date) => {
        return () => {
            setTime(order_date)

            setOrderId([orderId]);
            showModal("time")()
        }
    };
    //修改状态
    const onStatusChange = (orderId,status)=>{
        return ()=>{
            setOrderId([orderId])
            switch (status) {
                case '待支付':
                    status = '1';
                    break;
                case '已体检':
                    status = '2';
                    break;
                case '已取消':
                    status = '3';
                    break;
            }
            setStatus(status)
            showModal()()
        }
    };
    //表格数据
    const columns = [
        {
            title: '姓名',
            dataIndex: 'user_name',
        },
        {
            title: '性别',
            dataIndex: 'gender',
        },
        {
            title: '手机',
            dataIndex: 'user_tel',
        },
        {
            title: '身份证号',
            dataIndex: 'idCard',
        },
        {
            title: '体检内容',
            dataIndex: 'phy_projectName',
        },
        {
            title: '体检机构',
            dataIndex: 'org_Name',
        },
        {
            title: '体检日期',
            dataIndex: 'order_date',
        },
        {
            title: '订单号',
            dataIndex: 'order_orderId',
        },
        {
            title: '体检状态',
            dataIndex: 'order_status',
        },
        {
            title: '操作',
            dataIndex: 'operate',
            render: (text, record) => (
                <div className={table.operate}><a onClick={onTimeChange(record.order_orderId,record.order_date)}>修改时间</a><a
                    onClick={onStatusChange(record.order_orderId,record.order_status)}>修改状态</a></div>),
        },


    ];

    return (
        <div>
            {status}
            {/*编辑*/}
            <div className={table.edit_container}>
                <div>
                    <Button className={table.changeBtn} onClick={showModal()}>修改状态</Button>
                    <Button>导入</Button>
                </div>
            </div>
            {/*表格*/}
            <Table
                rowSelection={rowSelection}
                columns={columns}
                dataSource={tableData}
                size="middle"
                bordered
                rowKey="order_orderId"
            />
            {/*模态框*/}
            <EditModal visible={editModal} onOk={handleStatusOk} onCancel={handleCancel} status={status}/>
            <TimeModal visible={timeModal} value={cTime} onOk={handleTimeOk} onCancel={handleCancel} setTime={setTime} orderId={orderId}/>
        </div>
    )
}

export default TableList
